<template>
  <div class="box">
    <header class="header">
      我的
    </header>
    <div class="content my">
      <div class="show" @click="$router.push('/setuser')">
        <van-image
          round
          width="1rem"
          height="1rem"
          :src="avatar"
        />
        <div class="users">
          <h4>{{nickName}}</h4>
          <h5>{{tel}}</h5>
        </div>
        <van-icon name="arrow" />
      </div>
      <van-grid>
        <van-grid-item text="余额" />
        <van-grid-item text="吉致币" />
        <van-grid-item text="优惠券" />
        <van-grid-item text="兑换券" />
      </van-grid>
      <van-cell title="我的订单" icon="balance-list" is-link @click="$router.push('/order')"/>
      <van-cell class="location" title="收货地址" icon="location" is-link @click="$router.push('/address')"/>
      <van-cell title="客服" icon="service" is-link />
      <van-cell class="about" title="关于我们" icon="coupon" is-link />
      <van-cell title="我的消息" icon="chat" is-link />
      <van-cell title="设置" icon="setting" is-link @click="$router.push('/setuser')"/>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Cookies from 'js-cookie'

import { Card, Grid, GridItem, Icon, Cell, CellGroup, Image as VanImage } from 'vant'
import { getUserMsg } from '../../api/index.js'
Vue.use(Card)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Icon)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(VanImage)

export default {
  // 组件路由守卫
  beforeRouteEnter (to, from, next) {
    if (Cookies.get('isLogin') === 'ok') {
      // 需求 如果登陆则返回上一级路由
      // 参数to.path存储的有上级路由
      next()
    } else {
      next('/login?to=' + to.path)
    }
  },
  data () {
    return {
      nickName: '',
      tel: '',
      avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604600287248&di=526a96dbc1c46ec4792d006a9cac8146&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F16%2F20150916235818_HVAk2.jpeg'
    }
  },
  mounted () {
    getUserMsg({
      userId: Cookies.get('userId')
    }).then(res => {
      console.log(res.data.data, 234567)
      // 页面初始请求到数据时要把默认值改掉
      this.avatar = res.data.data.avatar
      this.nickName = res.data.data.nickName
      this.tel = res.data.data.tel
    })
  }
}
</script>

<style lang="scss">
  .my{
    // background-color: #eee;
    .show{
      display: flex;
      align-items: center;
      background-color: lightblue;
      .van-image{
        margin-right:0.2rem;
      }
      padding: 0.1rem 0 0.1rem 0.1rem;
      .van-icon-arrow{
        margin-left: 1.1rem;
      }
    }
    .users{
      h4{
        margin-bottom: 0.1rem;
      }
    }
    .van-grid-item__text{
      font-size: 15px;
    }
    .location{
      margin-bottom:0.1rem;
    }
    .about{
      margin-bottom:0.1rem;
    }
  }
</style>
